<template>
    <div>
        <div class="recharge-header">0</div>
        <div class="recharge-v">我的V币</div>
        <div style="margin: 40px 20px 10px 20px;border-bottom: 1px solid #eee;"></div>
        <div style="margin: 20px;">
            <div style="font-size: 13px;padding-bottom: 24px;padding-top: 10px;">请选择支付方式</div>
            <div style="height: 44px;line-height:44px;width: 100%;">
                <div @click="select('wechat')" style="float: left;width: 44%;border: 1px solid #eee;"
                     :class="{ active: !isActive }">
                    <div style="width: 64px;margin: 0 auto;">
                        <div class="charge-wx">微信</div>
                    </div>
                </div>

                <div @click="select('alipay')" style="float: right;width: 44%;border: 1px solid #eee;"
                     :class="{ active: isActive }">
                    <div style="width: 80px;margin: 0 auto;">
                        <div class="charge-alipay">支付宝</div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div style="font-size: 13px;padding-bottom: 20px;padding-top: 20px;">请选择充值金额</div>

            <div>
                <div class="fl" style="height: 60px;width: 30%;text-align: center;margin-bottom: 10px;">
                    <div style="margin: 0 auto;border: 1px solid #eee;">
                        <div style="height: 30px;line-height: 30px;font-size: 13px;">100V币</div>
                        <div style="font-size: 12px;color: #888888;height: 30px;line-height: 30px;">¥ 100</div>
                    </div>
                </div>
                <div class="fl" style="height: 60px;width: 30%;text-align: center;margin-left: 5%;margin-bottom: 10px;">
                    <div style="margin: 0 auto;border: 1px solid #eee;">
                        <div style="height: 30px;line-height: 30px;font-size: 13px;">1000V币</div>
                        <div style="font-size: 12px;color: #888888;height: 30px;line-height: 30px;">¥ 1000</div>
                    </div>

                </div>
                <div class="fl" style="height: 60px;width: 30%;text-align: center;margin-left: 5%;margin-bottom: 10px;">
                    <div style="margin: 0 auto;border: 1px solid #eee;">
                        <div style="height: 30px;line-height: 30px;font-size: 13px;">1000V币</div>
                        <div style="font-size: 12px;color: #888888;height: 30px;line-height: 30px;">¥ 1000</div>
                    </div>
                </div>

                <div class="fl" style="height: 60px;width: 30%;text-align: center;margin-bottom: 10px;">
                    <div style="margin: 0 auto;border: 1px solid #eee;">
                        <div style="height: 30px;line-height: 30px;font-size: 13px;">100V币</div>
                        <div style="font-size: 12px;color: #888888;height: 30px;line-height: 30px;">¥ 1000</div>
                    </div>
                </div>

                <div class="fl" style="height: 60px;width: 30%;text-align: center;margin-left: 5%;margin-bottom: 10px;">
                    <div style="margin: 0 auto;border: 1px solid #eee;">
                        <div style="height: 30px;line-height: 30px;font-size: 13px;">1000V币</div>
                        <div style="font-size: 12px;color: #888888;height: 30px;line-height: 30px;">¥ 1000</div>
                    </div>
                </div>

                <div class="fl" style="height: 60px;width: 30%;text-align: center;margin-left: 5%;margin-bottom: 10px;">
                    <div style="margin: 0 auto;border: 1px solid #eee;">
                        <div style="height: 30px;line-height: 30px;font-size: 13px;">1001V币</div>
                        <div style="font-size: 12px;color: #888888;height: 30px;line-height: 30px;">¥ 1000</div>
                    </div>
                </div>

            </div>
        </div>
        <div style="position: absolute;bottom: 30px;font-size: 12px;color: #888888;text-align: center;width: 100%;">
            注：充值金额不可退还和返现
        </div>
    </div>
</template>

<script>
    export default {
        name: "recharge",
        data() {
            return {
                isActive: true
            }
        },
        methods: {
            select(type) {
                this.isActive = !this.isActive;
            }
        }
    }
</script>

<style scoped>
    .recharge-header {
        font-size: 30px;
        text-align: center;
        padding-top: 40px;
    }

    .recharge-v {
        color: #888888;
        text-align: center;
        font-size: 12px;
    }

    .charge-wx {
        background: url("../assets/wechat.png") no-repeat left center;
        background-size: 24px;
        padding-left: 32px;
    }

    .charge-alipay {
        background: url("../assets/alipay.png") no-repeat left center;
        background-size: 24px;
        padding-left: 32px;
    }

    .active {
        border: 1px solid #FA74AE !important;
    }

</style>